<template>
  <div>
    <el-dialog
      title="5Why分析"
      :visible.sync="centerDialogVisible"
      width="900px"
      height="800px"
      center
    >
      <el-dialog width="30%" title="发送" :visible.sync="innerVisible" center append-to-body>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="部门">
            <el-select v-model="form.department" placeholder="请选择部门">
              <el-option label="QA" value="QA"></el-option>
              <el-option label="包装" value="bz"></el-option>
              <el-option label="酿造" value="nz"></el-option>
              <el-option label="动力" value="dl"></el-option>
              <el-option label="物流" value="wl"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="岗位">
            <el-select v-model="form.post" placeholder="请选择岗位">
              <el-option label="班长" value="shanghai"></el-option>
              <el-option label="组长" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="人员">
            <el-select v-model="form.personnel" placeholder="请选择人员">
              <el-option label="张三" value="shanghai"></el-option>
              <el-option label="李四" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="danger" @click="innerVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <table class="abnormal">
        <tr>
          <td class="abnormal-one-td-bcg">日期</td>
          <td class="abnormal-one-td-bcg">班</td>
          <td class="abnormal-one-td-bcg">时间</td>
        </tr>
        <tr>
          <td class="abnormal-one-td-content">2019-7-22</td>
          <td class="abnormal-one-td-content">001</td>
          <td class="abnormal-one-td-content">08:30</td>
        </tr>
        <tr>
          <td>部门：</td>
          <td>线/区域：</td>
          <td>设备/机器</td>
        </tr>
        <tr>
          <td>包装</td>
          <td>包装1线</td>
          <td>洗瓶机</td>
        </tr>
      </table>
      <div>
        <div class="abnormal-info">触发条件信息</div>
        <div class="trigger">
          <div>触发：</div>
          <div>当班FBI剔除不合格品率超标</div>
        </div>
        <div class="abnormal-info">最初采取的控制问题或使程序正常运转的措施是什么？</div>
        <div class="measures"></div>
        <div class="abnormal-info">5个为什么分析：问题的根本原因是什么？</div>
        <div class="personnel">
          <div class="personnel-title">参加人员：</div>
          <div class="personnel-num"></div>
        </div>
        <div style="text-align: center;display: flex">
          <div style="width: 60%;" class="abnormal-info">回答5个为什么</div>
          <div style="width: 40%;" class="abnormal-info">证据：你怎么知道这就是“为什么”的答案？</div>
        </div>
        <table class="abnormal">
          <tr>
            <td>1</td>
            <td style="width: 120px;">为什么当班FBI剔除不合格品率</td>
            <td style="padding: 0;">
              <table class="abnormal-two">
                <tr>
                  <td style="height: 20px"></td>
                </tr>
                <tr>
                  <td style="border-bottom: none;height: 20px"></td>
                </tr>
              </table>
            </td>
            <td style="width: 120px;">点击上传</td>
          </tr>
          <tr v-for="(item,index) in 4">
            <td>{{index+2}}</td>
            <td></td>
            <td style="padding: 0;">
              <table class="abnormal-two">
                <tr>
                  <td style="width: 120px;height: 20px"></td>
                </tr>
                <tr>
                  <td style="border-bottom: none;height: 20px"></td>
                </tr>
              </table>
            </td>
            <td style="width: 120px;"></td>
          </tr>
        </table>
        <table class="abnormal" style="margin-top: 20px;">
          <tr>
            <td class="abnormal-one-td-bcg">主题</td>
            <td class="abnormal-one-td-bcg">行动计划</td>
            <td class="abnormal-one-td-bcg">责任人</td>
          </tr>
          <tr>
            <td style="height: 20px;">
              <input type="text" style="width: 100%;" v-model="addSpots.topic" />
            </td>
            <td>
              <input type="text" style="width: 100%;" v-model="addSpots.actionPlan" />
            </td>
            <td>
              <input type="text" style="width: 100%;" v-model="addSpots.wener" />
            </td>
          </tr>
        </table>
        <div style="margin-left: 22vw;margin-top: 10px">
          <el-button @click="saveck">保存</el-button>
          <el-button type="danger" @click="innerVisible = true">发送</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "parsing",
  data() {
    return {
      centerDialogVisible: true,
      innerVisible: false,
      form: { department: "QA", post: "", personnel: "" } //分析问题  5why分析点发送时弹框内参数
    };
  },
  methods: {
    // 异常保存
    saveck() {
      this.addSpots.dateNum = this.getYearWeek(this.value1);
      this.$post("piTeamHotSpots/addSpots", this.addSpots)
        .then(response => {
          if (response.resultCode === 1) {
            this.$message({
              message: response.msg,
              type: "success"
            });
            this.getSpot();
          } else {
            this.$message.error(response.msg);
          }
        })
        .catch(err => {
          this.$message.error(err);
        });
      this.centerDialogVisible = false;
      this.txtVerify = false;
    }
  }
};
</script>

<style scoped>
.abnormal {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #c52d00;
  text-align: left;
}

.abnormal td {
  border: 1px solid #aaa;
  box-sizing: border-box;
  padding-left: 10px;
}

.abnormal-one-td-bcg {
  background-color: #c72f00;
  text-align: center;
  color: #fff;
}

.abnormal-one-td-content {
  text-align: center;
}

.abnormal-info {
  text-align: center;
  background-color: #c52d00;
  color: #fff;
  margin-top: 20px;
}

.abnormal-two {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.abnormal-two td {
  border-top: 1px solid #aaa;
  border-right: none;
  border-left: none;
}

.abnormal-two td:first-child {
  border-top: none;
}
.trigger {
  display: flex;
}

.trigger div {
  box-sizing: border-box;
  padding-left: 10px;
  width: 50%;
  border: 1px solid #aaa;
}

.trigger div:last-child {
  border-left: none;
}

.measures {
  height: 50px;
  border: 1px solid #aaa;
}

.personnel {
  display: flex;
}

.personnel-title {
  box-sizing: border-box;
  padding-left: 10px;
  width: 15%;
  border: 1px solid #aaa;
}

.personnel-num {
  box-sizing: border-box;
  padding-left: 10px;
  width: 85%;
  border: 1px solid #aaa;
  border-left: none;
}
</style>
